<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 10px;
            width: 50%;
        }

        .container {
            display: grid;
        }

        .item {
            font-size: 2em;
            color: #fff;
            border: 1px solid #333;
        }

        .container {
            grid-template-columns: repeat(12, 45px);
            grid-template-rows: repeat(5, 70px);
        }

        .item1 {
            grid-column: 1 / span 6;
            background-color: red;
        }

        .item2 {

            grid-column: 7 / span 6;
            background-color: green;
        }

        .item3 {
            grid-column: 1 / span 4;
            background-color: rgb(0, 128, 128);
        }

        .item4 {

            grid-column: 5 / span 4;
            background-color: rgb(255, 255, 0);
        }

        .item5 {
            grid-column: 9 / span 4;
            background-color: rgb(255, 215, 0);
        }

        .item6 {
            grid-column: 1 / span 3;
            background-color: pink;
        }

        .item7 {
            grid-column: 4 / span 3;
            background-color: blueviolet;
        }

        .item8 {
            grid-column: 7 / span 3;
            background-color: blue;
        }

        .item9 {
            grid-column: 10 / span 3;
            background-color: black;
        }

        .item10 {
            grid-column: 1 / span 6;
            grid-row:4/span2 ;
            background-color: red;
        }

        .item11 {
            grid-column: 7 / span 6;
            grid-row:4/span2 ;
            background-color: green;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="item item1">50%</div>
        <div class="item item2">50%</div>
        <div class="item item3">33.33%</div>
        <div class="item item4">33.33%</div>
        <div class="item item5">33.33%</div>
        <div class="item item6">25%</div>
        <div class="item item7">25%</div>
        <div class="item item8">25%</div>
        <div class="item item9">25%</div>
        <div class="item item10">50%</div>
        <div class="item item11">50%</div>

    </div>
</body>

</html>